<template>
  <div id="bread" v-if="type === 'breadcrumb'">
    <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
      <el-breadcrumb-item v-for="item in menuPathList" :key="item.id">
        {{ item.title }}
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <div id="warp" v-if="type === 'menus'">
    <i class="el-icon-caret-left pre" @click="preClick"></i>
    <div id="menus" ref="menus">
      <div id="items">
        <div class="menuItem" :class="{ enterMenu: item.now }" v-for="(item, index) in menusList" :key="index">
          <span @click="gotoMenu(item)">{{ item.title }}</span>
          <i class="el-icon-circle-close close" @click.stop="closeMenu(index)"></i>
        </div>
      </div>
    </div>
    <i class="el-icon-caret-right next" @click="nextClick"></i>
  </div>
</template>
<script setup>
import { ref, reactive, defineProps, defineEmit, useContext, computed } from 'vue'
import { useStore, mapGetters } from 'vuex'
import { useRouter } from 'vue-router'
const router = useRouter()

const store = useStore()

const { expose } = useContext()
const emit = defineEmit(['updata'])
const props = defineProps({
  show: {
    type: Boolean,
    default: true,
  },
  type: {
    type: String,
    default: 'breadcrumb',
  },
})
let menuPathList = computed(() => {
  return store.getters.menusBread
})
const menusList = computed(() => {
  return store.getters.menus
})
function closeMenu(index) {
  store.commit('deleteMenu', index)
}
let menus = ref(null)
function preClick() {
  const menuDom = menus.value
  scrollLeftChange(menuDom, menuDom.clientWidth / 2)
}
function nextClick() {
  const menuDom = menus.value
  scrollLeftChange(menuDom, -menuDom.clientWidth / 2)
}
let changeStart = ref(true)
function scrollLeftChange(Dom, num) {
  if (!changeStart.value) {
    return
  }
  changeStart.value = false
  let flag = num > 0,
    steps = 0
  num = Math.abs(num)
  const timer = setInterval(() => {
    steps = parseInt(num / 20)
    steps = steps < 2 ? 20 : steps
    if (num <= 0) {
      clearInterval(timer)
      changeStart.value = true
    }
    if (flag) {
      Dom.scrollLeft -= steps
    } else {
      Dom.scrollLeft += steps
    }
    num = num - steps
  }, 10)
}
function gotoMenu(route) {
  store.commit('setMenu', route)
}
</script>
<style lang="scss" scoped>
#bread {
  padding: 7px 20px;
  border-bottom: 1px solid #eee;
  box-sizing: border-box;
  height: 30px;
}
#warp {
  position: relative;
  .pre,
  .next {
    display: flex;
    width: 30px;
    height: 30px;
    position: absolute;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    cursor: pointer;
    color: #ddd;
    background-color: #fff;
    z-index: 1;
  }
  .pre {
    top: 0;
    left: 0px;
  }
  .next {
    top: 0;
    right: 0px;
  }
}
#menus {
  height: 30px;
  padding: 0 30px;
  position: relative;
  overflow-x: auto;
  width: calc(100% - 90px);
  &::-webkit-scrollbar {
    /*外层轨道*/
    width: 0px;
    height: 0px;
    background: #fff;
    border-radius: 2px;
    position: absolute;
    left: -5px;
  }
  &::-webkit-scrollbar-thumb {
    /*内层轨道*/
    display: block;
    width: 6px;
    height: 0px;
    margin: 0 auto;
    border-radius: 10px;
    background: #ccc;
  }
  #items {
    display: flex;
    justify-content: flex-start;
    .menuItem {
      font-size: 14px;
      padding: 0 20px 0 5px;
      line-height: 20px;
      border: 1px solid #ccc;
      border-radius: 4px;
      flex-shrink: 0;
      margin: 4px 5px;
      cursor: pointer;
      position: relative;
      user-select: none;
      background-color: #eee;
      &:hover,
      &.enterMenu {
        color: #fff;
        border-color: #1b65b9;
        background-color: #1b65b9;
      }
      .close {
        position: absolute;
        right: 0;
        top: 0;
        width: 20px;
        height: 20px;
        font-size: 14px;
        display: flex;
        justify-content: center;
        align-items: center;
        &:hover {
          color: #fff;
          font-size: 16px;
        }
      }
    }
  }
}
</style>
